<div class="row" style="border-bottom: 10px solid #EFEFEF;padding:10px;">
	<div class="col-lg-8">
		<div class="ukefu-measure">
			<div class="ukefu-bt"> 
				<div	class="layui-icon ukewo-btn ukefu-content-ind"><img src="/images/webim.png" style="width:60px;height:60px;"></div>
				<div class="ukefu-bt-text">
					<div class="ukefu-bt-text-title"
						style="font-weight:400;font-size:24px;border-bottom:1px solid #dedede;">
							${snsAccount.name!''}
							<span style="font-size:15px;color:#AAAAAA;">接入网站创建时间：${snsAccount.createtime!?string("yyyy-MM-dd HH:mm:ss")}</span>
					</div>
					<div class="ukefu-bt-text-content" style="">${snsAccount.name!''}</div>
				</div>
			</div>
		</div>
	</div>
</div>

<div class="ukefu-tab-title" style="margin-left: 0px;">
	<ul class="tab-title">
		<li <#if subtype == 'webim'>class="layui-this"</#if>><a href="/admin/webim/index.html?snsid=${snsAccount.snsid!''}">基本设置</a></li>
		<li <#if subtype == 'invote'>class="layui-this"</#if>><a href="/admin/webim/invote.html?snsid=${snsAccount.snsid!''}">邀请设置</a></li>
		<li <#if subtype == 'profile'>class="layui-this"</#if>><a href="/admin/webim/profile.html?snsid=${snsAccount.snsid!''}">客服信息</a></li>
		<li <#if subtype == 'tips'>class="layui-this"</#if>><a href="/admin/webim/tips.html?snsid=${snsAccount.snsid!''}">提示语设置</a></li>
	</ul>
</div>
<div class="layui-tab">
  <div class="layui-tab-content">
    <div class="layui-tab-item layui-show">
		<form method="post" key="set-mine" enctype="multipart/form-data" action="/admin/webim/tips/save.html" class="layui-form">
			<input type="hidden" name="snsid" value="${snsAccount.snsid!''}">
			<div class="row">
				<div class="col-lg-12">
					<div class="ukefu-customer-div setting-wrapper">
						<div class="box default-box">
							<div class="box-header">
								<h3 class="box-title">提示语设置</h3>
							</div>
							<div class="box-body ukefu-im-theme">
								<div class="row">
									<div class="col-lg-8">
										<div class="ukefu-webim-prop">
											<div class="ukefu-webim-tl" style="clear:both;">1、无坐席在线提示消息</div>
											<div class="box-item">
												<div class="row">
													<div class="col-lg-12">
														<textarea name="noagentmsg" id="noagentmsg" autocomplete="off" class="layui-input" resize="false" style="height:90px;line-height:22px;resize: none;"><#if snsAccount?? && snsAccount.noagentmsg??>${snsAccount.noagentmsg}<#else>您好，当前无人工坐席在线。</#if></textarea>
													</div>
												</div>
											</div>
										</div>
										<div class="ukefu-webim-prop">
											<div class="ukefu-webim-tl" style="clear:both;">2、坐席忙时提示消息（排队当前位置请使用{index}替换，提示前面人数请使用{num}替换）</div>
											<div class="box-item">
												<div class="row">
													<div class="col-lg-12">
														<textarea name="agentbusymsg" id="agentbusymsg" autocomplete="off" class="layui-input" resize="false" style="height:90px;line-height:22px;resize: none;"><#if snsAccount?? && snsAccount.agentbusymsg??>${snsAccount.agentbusymsg}<#else>坐席全忙，已进入等待队列，在您之前，还有 {num} 位等待用户。</#if></textarea>
													</div>
												</div>
											</div>
										</div>
										<div class="ukefu-webim-prop">
											<div class="ukefu-webim-tl" style="clear:both;">3、人工坐席分配成功提示消息（坐席使用{agent}替换）</div>
											<div class="box-item">
												<div class="row">
													<div class="col-lg-12">
														<textarea name="successmsg" id="successmsg" autocomplete="off" class="layui-input" resize="false" style="height:90px;line-height:22px;resize: none;"><#if snsAccount?? && snsAccount.successmsg??>${snsAccount.successmsg}<#else>坐席分配成功，{agent}为您服务。</#if></textarea>
													</div>
												</div>
											</div>
										</div>
										<div class="ukefu-webim-prop">
											<div class="ukefu-webim-tl" style="clear:both;">4、坐席服务结束提示消息</div>
											<div class="box-item">
												<div class="row">
													<div class="col-lg-12">
														<textarea name="finessmsg" id="finessmsg" autocomplete="off" class="layui-input" resize="false" style="height:90px;line-height:22px;resize: none;"><#if snsAccount?? && snsAccount.finessmsg??>${snsAccount.finessmsg}<#else>坐席已断开和您的对话</#if></textarea>
													</div>
												</div>
											</div>
										</div>
										<div class="ukefu-webim-prop">
											<div class="ukefu-webim-tl" style="clear:both;">5、启用工作时间段设置</div>
											<div class="box-item">
												<div class="row">
													<div class="col-lg-8">
														<p>非工作时间段提醒功能</p>
														<p style="color:#888888;font-size:13px;margin-top:10px;">开启后，当前时间不在工作时间段内访问将会提示，首先需要到【客服设置】->【坐席服务日期设置】中新增坐席服务的（日期类型、工作类型）</p>
													</div>
													<div class="col-lg-4" style="text-align:right;">
														<input type="checkbox" title="启用" name="hourcheck" id="hourcheck" lay-filter="hourcheck" <#if snsAccount?? && snsAccount.hourcheck == true>checked="checked"</#if>>
													</div>
												</div>
											</div>
											<div class="box-item" id="hourcheck_tip" style="<#if snsAccount?? && snsAccount.hourcheck == false>display:none;</#if>">	
												<div class="row" style="margin-bottom:20px;">
													<div class="col-lg-12">
														<p>a、设置工作时间段<i class="layui-icon" title="工作时间段，开始时间大于结束时间时，则实行24小时制" style="font-size: 10px;">&#xe60b;</i></p>
														<p style="color:#888888;font-size:13px;margin-top:10px;">只有设置工作时间段之后，留言功能才生效</p>
													</div>
												</div>
												<div class="row" style="margin-bottom:20px;">
													<div class="col-lg-12">
														<div id="workhours">
															<#if snsAccount.config??>
																<#list snsAccount.config as sc>
																	<#assign  a = sc.type>
																	<#assign  b = sc.workinghours>
																	<#assign  c = sc.worktype>
																	<small class="ukefu-timerange layui-btn layui-btn-normal">
																		<#if c == 'work'>
																			${uKeFuDic[a!''].name!''}:
																			<#if c == 'work'>工作<#else>非工作</#if>
																			:${b}
																		<#else>
																			${uKeFuDic[a!''].name!''}:
																			<#if c == 'work'>工作<#else>非工作</#if>
																		</#if>
																		
																		<i class="layui-icon">&#x1006;</i>
																		<input type='hidden' class='wokrtime' name='workinghours' value='${a}:${c}:${b}' data-type='${a}' data-worktype='${c}' data-hours='${b}'/>
																	</small>
																</#list>
															</#if>
														</div>
													</div>
												</div>
												<div class="row" style="margin-bottom:20px;">
													<div class="col-lg-12">
														<div class="layui-inline">
															<div class="layui-input-inline" style="width: 100px;">
																<select id="wh_timetype">
																	<#if workDateList??>
													      				<option value="">日期类型</option>
														      			<#list workDateList as work>
														      				<option value="${work.id}">${work.name!''}</option>
														      			</#list>
														      		</#if>
																</select>
															</div>
														</div>
														<div class="layui-inline">
															<div class="layui-input-inline" style="width: 3px;">
																:
															</div>
														</div>
														<div class="layui-inline">
															<div class="layui-input-inline" style="width: 100px;">
																<select id="wh_worktype" lay-filter="worktype">
													      				<option value="">工作类型</option>
														      			<option value="work">工作</option>
														      			<option value="nowork">非工作</option>
																</select>
															</div>
														</div>
														<div class="layui-inline work">
															<div class="layui-input-inline" style="width: 3px;">
																:
															</div>
														</div>
														<div class="layui-inline work">
															<div class="layui-input-inline" style="width: 70px;">
																<select id="wh_start_h">
																	<#list 0..23 as hours>
																	<option value="${hours?string('00')}" <#if hours == 8>selected="selected"</#if>>${hours?string('00')}</option>
																	</#list>
																</select>
															</div>
														</div>
														<div class="layui-inline work">
															<div class="layui-input-inline" style="width: 3px;">
																:
															</div>
														</div>
														<div class="layui-inline work">
															<div class="layui-input-inline" style="width: 70px;" >
																<select id="wh_start_m">
																	<#list 0..59 as min>
																	<option value="${min?string('00')}" <#if min == 30>selected="selected"</#if>>${min?string('00')}</option>
																	</#list>
																</select>
															</div>
														</div>
														<div class="layui-inline work">
															<div class="layui-input-inline" style="width: 20px;">
																~
															</div>
														</div>
														<div class="layui-inline work">
															<div class="layui-input-inline" style="width: 70px;">
																<select id="wh_end_h">
																	<#list 0..23 as hours>
																	<option value="${hours?string('00')}" <#if hours == 11>selected="selected"</#if>>${hours?string('00')}</option>
																	</#list>
																</select>
															</div>
														</div>
														<div class="layui-inline work">
															<div class="layui-input-inline" style="width: 3px;">
																:
															</div>
														</div>
														<div class="layui-inline work">
															<div class="layui-input-inline" style="width: 70px;">
																<select id="wh_end_m">
																	<#list 0..59 as min>
																	<option value="${min?string('00')}" <#if min == 30>selected="selected"</#if>>${min?string('00')}</option>
																	</#list>
																</select>
															</div>
														</div>
														<div class="layui-inline">
															<div class="layui-input-inline" style="width: 70px;">
																<button class="layui-btn layui-btn-primary" type="button" id="wh_time_range"><i class="layui-icon">&#xe608;</i></button>
															</div>
														</div>
													</div>
												</div>
												<div class="row" style="margin-bottom:20px;">
													<div class="col-lg-12">
														<p>b、设置非工作时间段的提示信息</p>
														<p style="color:#888888;font-size:13px;margin-top:10px;">在微信渠道下使用或直接打开对话窗口的情况下使用</p>
													</div>
												</div>
												<div class="row">
													<div class="col-lg-12">
														<textarea name=notinwhmsg autocomplete="off" class="layui-input" resize="false" style="height:90px;line-height:22px;resize: none;">${snsAccount.notinwhmsg!'您好，当前非工作时间段。'}</textarea>	
													</div>
												</div>
											</div>
										</div>
										
										<div class="ukefu-webim-prop">
											<div class="ukefu-webim-tl" style="clear:both;">6、启用满意度调查</div>
											<div class="box-item">
												<div class="row">
													<div class="col-lg-8">
														<p>启用此功能后，客户在结束对话的时候，提示选择满意度</p>
														<p style="color:#888888;font-size:13px;margin-top:10px;">满意度调查功能，所有实时渠道适用（WebIM，微信）</p>
													</div>
													<div class="col-lg-4" style="text-align:right;">
														<input type="checkbox" title="启用" name="satisfaction" id="satisfaction" lay-filter="satisfaction" <#if snsAccount?? && snsAccount.satisfaction == true>checked="checked"</#if>>
													</div>
												</div>
											</div>
											<div class="box-item" id="satisf_op" style="<#if snsAccount?? && snsAccount.satisfaction == false>display:none;</#if>">	
												<div class="row">
													<div class="col-lg-8">
														<p>邀请访客评价的提示信息（坐席使用{agent}替换）</p>
													</div>
												</div>
												<div class="row" style="margin-top:10px;">
													<div class="col-lg-12">
														<textarea name="satisftext" id="satisftext" autocomplete="off" class="layui-input" resize="false" style="height:90px;line-height:22px;resize: none;"><#if snsAccount?? && snsAccount.satisftext??>${snsAccount.satisftext}<#else>请对我们的服务做出评价</#if></textarea>
													</div>
												</div>
											</div>
										</div>
										<div class="ukefu-webim-prop">
											<div class="ukefu-webim-tl" style="clear:both;">7、启用坐席工作台的外部快捷回复</div>
											<div class="box-item">
												<div class="row">
													<div class="col-lg-8">
														<p>启用外部快捷回复功能，通过接口访问</p>
														<p style="color:#888888;font-size:13px;margin-top:10px;">外部接口的输入和输出参数</p>
													</div>
													<div class="col-lg-4" style="text-align:right;">
														<input type="checkbox" title="启用" name="otherquickplay" id="otherquickplay" lay-filter="otherquickplay" <#if snsAccount?? && snsAccount.otherquickplay == true>checked="checked"</#if>>
													</div>
												</div>
											</div>
											<div class="box-item" id="otherquickplay_op" style="<#if snsAccount?? && snsAccount.otherquickplay == false>display:none;</#if>">	
												<div class="row"  style="margin-bottom:20px;">
													<div class="col-lg-8">
														<p>a、外部机器人启用HTTPS访问</p>
													</div>
													<div class="col-lg-4" style="text-align:right;">
														<input type="checkbox" id="otherssl" name="otherssl" title="启用" <#if snsAccount?? && snsAccount.otherssl == true>checked="checked"</#if>>
													</div>
												</div>
												<div class="row">
													<div class="col-lg-8">
														<p>b、外部快捷回复的搜索接口地址</p>
													</div>
													<div class="col-lg-4" style="text-align:right;">
														<input type="text" name="oqrsearchurl" id="oqrsearchurl" value="<#if snsAccount??>${snsAccount.oqrsearchurl!''}</#if>" autocomplete="off" class="layui-input" style="display:inline;">
													</div>
												</div>
												<div class="row" style="margin-top:10px;">
													<div class="col-lg-8">
														<p>c、外部快捷回复的搜索输入参数</p>
													</div>
													<div class="col-lg-4">
														<select name="oqrsearchinput">
															<option value="">请选择搜索接口输入参数格式化模板</option>
															<#if innputtemlet??>
															<#list innputtemlet as it>
															<option value="${it.id!''}" <#if snsAccount?? && snsAccount.oqrsearchinput?? && snsAccount.oqrsearchinput == it.id>selected="selected"</#if>>${it.name!''}</option>
															</#list>
															</#if>
														</select>
													</div>
												</div>
												<div class="row" style="margin-top:10px;">
													<div class="col-lg-8">
														<p>d、外部快捷回复的搜索输出参数</p>
													</div>
													<div class="col-lg-4">
														<select name="oqrsearchoutput">
															<option value="">请选择搜索接口输出参数格式化模板</option>
															<#if outputtemlet??>
															<#list outputtemlet as it>
															<option value="${it.id!''}" <#if snsAccount?? && snsAccount.oqrsearchoutput?? && snsAccount.oqrsearchoutput == it.id>selected="selected"</#if>>${it.name!''}</option>
															</#list>
															</#if>
														</select>
													</div>
												</div>
												
												<div class="row" style="margin-top:10px;">
													<div class="col-lg-8">
														<p>e、外部快捷回复的详情接口地址</p>
													</div>
													<div class="col-lg-4" style="text-align:right;">
														<input type="text" name="oqrdetailurl" id="oqrdetailurl" value="<#if snsAccount??>${snsAccount.oqrdetailurl!''}</#if>" autocomplete="off" class="layui-input" style="display:inline;">
													</div>
												</div>
												<div class="row" style="margin-top:10px;">
													<div class="col-lg-8">
														<p>f、外部快捷回复的详情输入参数</p>
													</div>
													<div class="col-lg-4">
														<select name="oqrdetailinput">
															<option value="">请选择详情接口输入参数格式化模板</option>
															<#if innputtemlet??>
															<#list innputtemlet as it>
															<option value="${it.id!''}" <#if snsAccount?? && snsAccount.oqrdetailinput?? && snsAccount.oqrdetailinput == it.id>selected="selected"</#if>>${it.name!''}</option>
															</#list>
															</#if>
														</select>
													</div>
												</div>
												<div class="row" style="margin-top:10px;">
													<div class="col-lg-8">
														<p>g、外部快捷回复的详情输出参数</p>
													</div>
													<div class="col-lg-4">
														<select name="oqrdetailoutput">
															<option value="">请选择详情接口输出参数格式化模板</option>
															<#if outputtemlet??>
															<#list outputtemlet as it>
															<option value="${it.id!''}" <#if snsAccount?? && snsAccount.oqrdetailoutput?? && snsAccount.oqrdetailoutput == it.id>selected="selected"</#if>>${it.name!''}</option>
															</#list>
															</#if>
														</select>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-lg-3"></div>
				<div class="col-lg-9">
					<div class="layui-form-item">
			          <div class="layui-input-block">
			            <button class="layui-btn" lay-submit="" lay-filter="formDemo">保存</button>
			            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
			          </div>
			        </div>
				</div>
			</div>
		</form>
	</div>
</div>
</div>

<script language="javascript"> 		
	layui.use('form', function(){
		var form = layui.form;
		form.render(); //
		
		form.on("checkbox(hourcheck)" , function(data){
			if(data.elem.checked == true){
				$('#hourcheck_tip').show();		
			}else{
				$('#hourcheck_tip').hide();
			}
		});
		form.on("checkbox(satisfaction)" , function(data){
			if(data.elem.checked == true){
				$('#satisf_op').show();		
			}else{
				
				$('#satisf_op').hide();
			}
		});
		form.on("checkbox(otherquickplay)" , function(data){
			if(data.elem.checked == true){
				$('#otherquickplay_op').show();		
			}else{
				
				$('#otherquickplay_op').hide();
			}
		});
		form.on("select(worktype)" , function(data){
			if(data.value == 'work'){
				$('.work').show();		
			}else{
				
				$('.work').hide();	
			}
		});
	});
	
	$('#wh_time_range').on("click" , function(){
		var timeRangeTitle = null;
		if($('#wh_worktype').val() == 'work'){
			timeRangeTitle = $("#wh_timetype option:selected").text()  + ":" +$("#wh_worktype option:selected").text()  + ":" + $("#wh_start_h").val()+":"+$("#wh_start_m").val()+"~"+$("#wh_end_h").val()+":"+$("#wh_end_m").val() ;
		}else{
			timeRangeTitle = $("#wh_timetype option:selected").text()  + ":" +$("#wh_worktype option:selected").text()  ;
		}
		var	timerange = $("#wh_timetype").val()  + ":" +$("#wh_worktype").val()  + ":" + $("#wh_start_h").val()+":"+$("#wh_start_m").val()+"~"+$("#wh_end_h").val()+":"+$("#wh_end_m").val() ;
		var id = "wh_"+ $("#wh_timetype").val()+ $("#wh_start_h").val()+$("#wh_start_m").val()+$("#wh_end_h").val()+$("#wh_end_m").val() ;
		
		var result = true;
		
		$('.wokrtime').each(function(){
			var at = $(this).data("type") ;
			var ct = $(this).data("worktype") ;
			var bb = $(this).data("hours") ;
			
			var bbs = bb.split('~');
			
			
			var tt = $("#wh_timetype").val();
			var wt = $("#wh_worktype").val();
			
			var start = $("#wh_start_h").val()+":"+$("#wh_start_m").val();
			var end = $("#wh_end_h").val()+":"+$("#wh_end_m").val() ;
			
			if(at == tt){
				if(ct == wt){
					if(wt == 'nowork'){
						top.layer.alert("该日期类型已设置过【未工作】！", {icon: 1});	
						result = false;
					}else{
						if(checkTime(bbs[0],bbs[1],start,end) == false){
							result = false;
						}
					}
				}
			}
		});
		if(result == true){
			if($("#wh_timetype").val() != '' && $("#"+id).length == 0){
				$('#workhours').append("<small id='"+id+"' class='ukefu-timerange layui-btn layui-btn-normal'>"+timeRangeTitle+" <i class='layui-icon'>&#x1006;</i><input type='hidden' name='workinghours' value='"+timerange+"'/></small>");
			}else{
				top.layer.alert('请选择日期类型或工作类型', {icon: 1});
			}
		}else{
			top.layer.alert('时间段已存在', {icon: 1});
		}
		
	});
			
	$(document).on("click" , ".ukefu-timerange", function(){
		var target = $(this);
		var index = top.layer.confirm("请确认是否移除时间段？", {icon: 3, title:'提示'}, function(text, cindex){
			top.layer.close(index);
			$(target).remove() ;
		});
		
	});
	
	function checkTime (a,b,x,y) {
		var times1=[],times2 = [];
		if (a<b) {
			//未跨天
			times1.push([a,b]);
		}else{
			//跨天
			times1.push([a,"24:00"],["00:00",b]);
		}
		
		if (x<y) {
			times2.push([x,y]);
		}else{
			times2.push([x,"24:00"],["00:00",y]);
		}
		
		var flag = false;
		//循环比较时间段是否冲突
		for (var i = 0; i < times1.length; i++) {
			if (flag) break;
			for (var j = 0; j < times2.length; j++) {
				if(check(times1[i][0],times1[i][1],times2[j][0],times2[j][1])){
					flag = true;
					break;
				}
			}
		}
		if (flag) {
			//layer.msg("时间段发生冲突");
			return false;
		}else{
			
			return true;
		}
	}
	function check (a,b,x,y) {
		if(y<a||b<x){  
			return false;
		}else{
			return true;
		}
	}
</script>

